<template>
	<Transition>
		<img v-if="showImg" src="https://rs.dance365.com/img/back_top@3x.e71cd044.png" alt="" @click="backTop">
	</Transition>
</template>

<script setup>
	import { onMounted,ref } from 'vue';
		var myTimer = -1;
		function backTop(){
			var scrollTo = document.documentElement.scrollTop || document.body.scrollTop
			    if(myTimer == -1){
			        myTimer = setInterval(() => {
			            scrollTo -= 60
			            if(scrollTo<=0){
			                scrollTo = 0
			                window.clearInterval(myTimer)
			                myTimer = -1
			            }
			            window.scrollTo(0,scrollTo) //这是值  是指离开网页顶部的距离   
			        }, 10);
			
			    }
		}
		const showImg=ref(false);
		function windowScrollListener() {
			//获取操作元素最顶端到页面顶端的垂直距离
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			if(scrollTop>=557){
				showImg.value=true;
			}else{
				showImg.value=false;
			}
		}
		onMounted(()=>{
			window.addEventListener('scroll', windowScrollListener);
		})
	
</script>

<style scoped>
	img{
		position: sticky;	
		width: 40px;
		border-radius: 5px;
		left: 100%;
		transform:translate(70px);
		bottom: 50px;
		margin-bottom: 50px;
		background-color:#dcdee0;
	}
	.v-enter-active,
	.v-leave-active {
	  transition: opacity 0.5s ease;
	}
	.v-enter-from,
	.v-leave-to {
	  opacity: 0;
	}
</style>